<template>
    <div class="m-classitem"  @click="clickProject()">
        <img :src="projectdata.project_avatar?projectdata.project_avatar:require('@/assets/images/p_02.jpg')" alt="" mode='widthFix'>
        <div>
            <span>{{projectdata.ProjectName}}</span>
            <p><i class="iconfont">&#xe644;</i>{{projectdata.StanderTime}}分钟</p>
        </div>
        <em class="iconfont" :class="{'on':projectdata.isselect==1}">&#xe628;</em>
    </div>
</template>
<script>
export default {
    name:"",
    props:['projectdata','leftIdx','rightIdx','chooseList','count'],
    data () {
        return {
          BASE_URL: process.env.API_HOST,//- 拼接url地址
          // projectdata: [],

        }
    },
    mounted() {
        let that = this;
    },
    methods: {
      clickProject(){
        //- 当前左右点击的顺序
        let rightIdx = this.rightIdx;    //- right index
        let leftIdx = this.leftIdx;    //- left index
        let projectid = this.projectdata.ProjectId;    //- 当前点击的项目id
        let projectname = this.projectdata.ProjectName;    //- 当前点击的项目名称
        let chooseList = this.chooseList;    //- 保存的选择的项数据
        let count = this.count;    //- 所有左边的点击数
        let countnum = count[leftIdx];    //- 所有左边的点击数
        let clickprojectdata = {};

        if(this.projectdata.isselect == 0){
          //- 代表之前没有选中
          //- 右边项目点亮并且数据记录左边点击总数据
          this.projectdata.isselect = 1;
          countnum += 1;
          count[leftIdx] = countnum;
          //- 右边数据保存
          console.log(chooseList);
          clickprojectdata = {
            projectid: projectid,
            projectname: projectname
          }
        }else{
          //- 代表之前有选中
          //- 右边项目点亮并且数据记录左边点击总数据
          this.projectdata.isselect = 0;
          countnum -= 1;
          count[leftIdx] = countnum;
          //- 右边数据保存
          console.log(chooseList);
          for (let i=0;i<chooseList.length;i++){
            if(chooseList[i].projectid == projectid){
              console.log(chooseList[i].projectid+"||"+projectid)
              //- 选取到·目前已经选择中的
              chooseList.splice(i,1);
              console.log(chooseList)
            }
          }
        }



        // let cc='124';
        this.$emit('childEvent',{count:count,leftIdx:leftIdx,projectdata:clickprojectdata});
      }
    }
}
</script>
<style lang="less" scoped>
.m-classitem{
    .flex;
    border-bottom: 1px solid @background-gray;
    padding: .5rem 0;
    position: relative;
    img{
        width: 4rem;
        height: 4rem;
        margin-right: .8rem;
        .border-radius(6px);
    }
    div{
        .flex;
        flex-direction: column;
        justify-content: space-between;
        height: 4rem;
        align-items: flex-start;
        span{
          display: inline-block;
          width: 8rem;
          height: 1.7rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 1.7rem;
        }
        p{
            color: @light-gray;
            font-size: .6rem;
            display: inline-block;
            vertical-align: top;
            margin-top: 1%;
            i {
              display: inline-block;
              font-size: 0.7rem;
            }
        }
        em{
            color: @secondary-red;
            font-size: .8rem;
            strong{
                font-size: 1rem;
                margin-left: .2rem;
            }
        }
    }
    em {
      position: absolute;
      z-index: 2;
      top: 17%;
      right: 4%;
      width: 1rem;
      height: 1rem;
      color: #E6E6E6;
      font-size: 0.9rem;
      line-height: 1rem;
      text-align: center;
      border-radius: 50%;
      &.on {
        color: #22D8D4;
      }
    }
}
</style>
